<template>
  <div class="poster  w">
    <el-form class="login-content" lable-position="left"  label-width="0px">
      <div class="login-title">
        <div class="text">系统登录</div>
        <el-button  @click="toRegister()" >点我注册</el-button>
      </div>
  <el-form-item >
    <el-input v-model="LoginForm.username" placeholder="账号" type="text" style="width:100%;"></el-input>
  </el-form-item>
  <el-form-item >
    <el-input v-model="LoginForm.password" placeholder="密码" type="password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="Login()" style="width: 100%; background-color: #505354;border: none;">立即登录</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
export default {
  data() {
      return {
        LoginForm:{
          username: '',
          password: ''
        }
      }
    },
    methods: {
      Login() {

        // console.log('submit!',this.LoginForm);
        this.axios.post('http://localhost:8088/login',this.LoginForm).then((response)=>{
          console.log(response);
          let data = response.data;
          if (data=='success') {
            this.$message({
              message: '登录成功,欢迎来到GoShopping!',
              type: 'success'
            });
            //缓存存入参数
            // window.localStorage.setItem('username', this.username);
            // window.localStorage.setItem('password', this.password);
            // window.localStorage.setItem('loginStatus', 'login');
            //直接commit触发mutations
            this.$store.commit('getUser', this.LoginForm.username);
            this.$store.commit('getLoginStatus',true)
            this.$router.push({ path: '/' })
          }else{
            this.$message({
            message: '用户名或密码错误',
            type: 'warning',
            
            });
        this.LoginForm={};
          }
        })
        
      },
      toRegister(){
        this.$router.push({path:'/register'})
      }
    }
}
</script>

<style lang="less">
  .poster{
    background-position:center;
    height: 570px;
    width: 100%;
    background-size: cover;
    .login-content{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 200px auto;
    width: 350px;
    border: 1px solid #eaeaea;
    padding: 35px;
    box-shadow: 0 0 25px #cac6c6;
    .login-title{
      margin-left: 80px;
      .text{
        font-size: 20px;
      }
      display: flex;
    }
    }
  }
  
</style>